<template>
  <div class="carlist">
    <div v-if="cartData.length!==0">
      <!-- 有数据才渲染 -->
      <div class="goodes">
        <hmheader title="黑马程序员"></hmheader>
        <div class="connent" v-for="v in cartData" :key="v.id">
          <div class="left">
            <van-switch v-model="v.checked" size="24px" />
          </div>
          <div class="center">
            <img :src="v.thumb_path" />
          </div>
          <div class="right">
            <p>{{v.title}}</p>
            <div class="rigth-bomm">
              <span style="color:red">￥ {{v.sell_price}}</span>
              <span>
                <van-stepper v-model="v.cou" integer />
              </span>
              <span style="color:#999;font-size:13px" @click="del(v.id)">删除</span>
            </div>
          </div>
        </div>
        <div class="calculate">
          <div class="left">
            <h2>总计(不含运费)</h2>
            <p>已经选择商品 {{sum}} 件,总价 ￥{{totalPrice}} 元</p>
          </div>
          <div class="right">
            <van-button type="danger" class="suan">去结算</van-button>
          </div>
        </div>fadsfasdfasfasdfa
      </div>
    </div>
    <div v-else>
      <!-- 没有数据的结构 、购物车没有物品-->
      22222222
    </div>
  </div>
</template>

<script>
import { cartlist } from "@/apis/goods.js";
import hmheader from "@/components/hmheader.vue";
export default {
  data() {
    return {
      locaData: localStorage.getItem("carts"), //本地数据
      ids: "", //请求的参数
      cartData: [], //渲染结构的数据
      // totalPrice: 0,
    };
  },
  components: {
    hmheader,
  },
  computed: {
    totalPrice() {
      let total = 0;
      this.cartData.map((v) => {
        if (v.checked) {
          total += v.cou * v.sell_price;
        }
      });
      return total;
    },
    sum() {
      let total = 0;
      this.cartData.map((v) => {
        if (v.checked) {
          total += v.cou;
        }
      });
      return total;
    },
  },
  methods: {
    del(id) {
      this.$dialog
        .confirm({
          title: "删除商品",
          message: "确定要删除吗",
        })
        .then(() => {
          this.cartData.map((v, i) => {
            if (v.id == id) this.cartData.splice(i, 1);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  async mounted() {
    if (this.locaData) {
      this.locaData = JSON.parse(this.locaData);
      this.ids = this.locaData
        .map((v) => {
          return v.id;
        })
        .join(",");
      this.cartData = (await cartlist(this.ids)).data.message;
      this.cartData = this.cartData.map((v) => {
        return { ...v, checked: false };
      });
      console.log(this.cartData);
    }
  },
};
</script>

<style lang="less" scoped>
.goodes {
  .connent {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #999;
    .left {
      width: 15%;
    }
    .center {
      width: 22%;
      img {
        width: 100%;
      }
    }
    .right {
      width: 63%;
      padding-left: 5px;
      font-size: 20px;
      color: rgb(77, 136, 224);
      .rigth-bomm {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
      }
    }
  }
  .calculate {
    background-color: rgb(224, 216, 216);
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    padding: 15px 10px 20px 10px;
    .left {
      h2 {
        font-size: 20px;
        font-weight: 700;
        padding-bottom: 15px;
      }
      p {
        font-size: 14px;
        font-weight: 700;
      }
    }
    .right {
      .suan {
        border-radius: 5px;
      }
    }
  }
}
</style>